import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table,Button,Tabs, Form, InputNumber, Input,Select, DatePicker, Col} from 'antd';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const Option = Select.Option;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

var ReactHighcharts = require('react-highcharts');

import AddCity from '../window/room/AddCity';

import "../less/chartstat.less";

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  render(text) {
    return <a href="#">{text}</a>;
  },
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const pagination = {
  total: data.length,
  showSizeChanger: true,
  onShowSizeChange(current, pageSize) {
    console.log('Current: ', current, '; PageSize: ', pageSize);
  },
  onChange(current) {
    console.log('Current: ', current);
  },
};

var config = {
  colors:[
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
  ],
  chart: {
      type: 'areaspline'
  },
  title: {
      text: '一至七月费用总成'
  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      floating: true,
  },
  xAxis: {
      categories: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月'
      ],
      // plotBands: [{ // visualize the weekend
      //     from: 4.5,
      //     to: 6.5,
      //     color: 'rgba(68, 170, 213, .2)'
      // }]
  },
  yAxis: {
      title: {
          text: '费用'
      }
  },
  tooltip: {
      shared: true,
      valueSuffix: ' 元'
  },
  credits: {
      enabled: false
  },
  plotOptions: {
      areaspline: {
          fillOpacity: 0.5
      }
  },
  series: [{
      name: '车位费',
      data: [0, 120, 213, 110, 500, 120, 0]
  }, {
      name: '立即清理费',
      data: [0, 80, 414, 200, 320, 480, 0]
  }]
};
var config2 = {
  colors:[
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
  ],
  chart: {
      type: 'areaspline'
  },
  title: {
      text: '一至七月费用总成'
  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      floating: true,
  },
  xAxis: {
      categories: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月'
      ],
      // plotBands: [{ // visualize the weekend
      //     from: 4.5,
      //     to: 6.5,
      //     color: 'rgba(68, 170, 213, .2)'
      // }]
  },
  yAxis: {
      title: {
          text: '费用'
      }
  },
  tooltip: {
      shared: true,
      valueSuffix: ' 元'
  },
  credits: {
      enabled: false
  },
  plotOptions: {
      areaspline: {
          fillOpacity: 0.5
      }
  },
  series: [{
      name: '车位费',
      data: [0, 120, 213, 110, 500, 120, 0]
  }, {
      name: '立即清理费',
      data: [0, 80, 414, 200, 320, 480, 0]
  }]
};

class ChartStat extends React.Component {
  constructor() {
    super();
    this.state = {
    };
  }
  componentDidMount() {

  }
  _showUser(record,index){
      this.props.showMask(<AddCity />);
  }
  render() {
    return (
        <div className="containerConten">
          <div className="memHead">
            <Breadcrumb>
              <Breadcrumb.Item>物业管理</Breadcrumb.Item>
              <Breadcrumb.Item>图表统计</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className="memContent csContainer">
            <div className="memTable" >
                <div className="memTableContent" style={{padding:0}}>
                  <Tabs defaultActiveKey="1">
                    <TabPane tab="已缴费金额" key="1">
                      <div className="memSearch">
                        <Form inline>
                          <FormItem
                            label="起止时间"
                          >
                              <DatePicker />
                          </FormItem>
                          <FormItem>
                              <DatePicker />
                          </FormItem>
                          <Button type="primary" htmlType="submit">查询时间段已缴费金额</Button>
                        </Form>
                      </div>
                      <ReactHighcharts config={config}></ReactHighcharts>
                      <div className="plot">
                      </div>
                      <Table columns={columns} dataSource={data} pagination={pagination}/>
                    </TabPane>
                    <TabPane tab="未缴费金额" key="2">
                      <div className="memSearch">
                        <Form inline>
                          <FormItem
                            label="起止时间"
                          >
                              <DatePicker />
                          </FormItem>
                          <FormItem>
                              <DatePicker />
                          </FormItem>
                          <Button type="primary" htmlType="submit">查询时间段已缴费金额</Button>
                        </Form>
                      </div>
                      <ReactHighcharts config={config2}></ReactHighcharts>
                      <div className="plot">
                      </div>
                      <Table columns={columns} dataSource={data} pagination={pagination}/>
                    </TabPane>
                  </Tabs>
                </div>
            </div>
          </div>
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    maskStatus: state.mask.maskStatus
  }
}

export default connect(
  mapStateToProps,
  { showMask }
)(ChartStat)
